<template>
	<div class="hh-dict-text">
		<div v-if="initloading" class="hh-dict-text-loading">
			<el-icon class="is-loading"><el-icon-loading /></el-icon>
		</div>
		{{dictText}}
	</div>
</template>

<script>
	import config from "@/config/dict";

	export default {
		props: {
			dictCode: { type: String, required: true, default: "" },	//字典编码
			dictType: { type: String, required: true, default: "" },	//字典类型
		},
		data() {
			return {
				dictText: "",
				params: {},
				initloading: false
			}
		},
		watch:{
			dictCode()
			{
				this.initloading = true
				this.getRemoteData()
			}
		},
		created() {
			this.initloading = true
			this.getRemoteData()
		},
		methods: {
			async getRemoteData()
			{//获取数据
				if(this.dictCode && this.dictType){
					this.params["dictCode"] = this.dictCode;
					this.params["dictType"] = this.dictType;
					var res = await config.apiText.get(this.params);
					if(res.code == 0)
					{
						var response= config.parseTextData(res)
						this.dictText = response.data
					}
					this.initloading = false
				}else{
					this.initloading = false
					return
				}
			}
		}
	}
</script>

<style scoped>

	.hh-dict-text {display: inline-block;position: relative;}
	.hh-dict-text-loading {position: absolute;top:0;left:0;right:0;bottom:0;background: #fff;z-index: 100;border-radius: 5px;border: 1px solid #EBEEF5;display: flex;align-items: center;padding-left:10px;}
	.hh-dict-text-loading i {font-size: 14px;}

	[data-theme='dark'] .hh-dict-text-loading {background: var(--el-color-white);border-color: var(--el-border-color-base) ;}
</style>
